import { useTranslation } from 'react-i18next'
import { Language, Settings, Theme } from '@/types'
import { languageNameMap, languages } from '@/i18n/locales'
import {
  FormGroup, FormControlLabel, Switch, Select, InputLabel,
  MenuItem, FormControl,
} from '@mui/material'

export default function DisplaySettingTab({ settingsEdit, setSettingsEdit }: {
  settingsEdit: Settings
  setSettingsEdit: (settings: Settings) => void
}) {
  const { t } = useTranslation()
  return (
    <div className="flex flex-col gap-3">
      <FormControl fullWidth>
        <InputLabel>{t('language')}</InputLabel>
        <Select
          label={t('language')}
          value={settingsEdit.language}
          className="w-full"
          onChange={e => setSettingsEdit({ ...settingsEdit, language: e.target.value as Language })}
        >
          {languages.map(language => ({ value: language, label: languageNameMap[language] })).map(option => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
      <FormControl fullWidth>
        <InputLabel>{t('theme')}</InputLabel>
        <Select
          label={t('theme')}
          value={settingsEdit.theme}
          className="w-full"
          onChange={e => setSettingsEdit({ ...settingsEdit, theme: e.target.value as Theme })}
        >
          {[
            { value: Theme.FollowSystem, label: t('follow system') },
            { value: Theme.LightMode, label: t('light mode') },
            { value: Theme.DarkMode, label: t('dark mode') },
          ].map(option => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
      <FormGroup>
        <FormControlLabel
          control={<Switch />}
          label={t('auto generate chat title')}
          checked={settingsEdit.autoGenerateTitle}
          onChange={(_, checked) => { setSettingsEdit({ ...settingsEdit, autoGenerateTitle: checked }) }}
        />
        <FormControlLabel
          control={<Switch />}
          label={t('show wordcount')}
          checked={settingsEdit.showWordCount}
          onChange={(_, checked) => setSettingsEdit({ ...settingsEdit, showWordCount: checked })}
        />
        <FormControlLabel
          control={<Switch />}
          label={t('show tokencount')}
          checked={settingsEdit.showTokenCount}
          onChange={(_, checked) => setSettingsEdit({ ...settingsEdit, showTokenCount: checked })}
        />
        <FormControlLabel
          control={<Switch />}
          label={t('show model name')}
          checked={settingsEdit.showModelName}
          onChange={(_, checked) => setSettingsEdit({ ...settingsEdit, showModelName: checked })}
        />
        <FormControlLabel
          control={<Switch />}
          label={t('show timestamp')}
          checked={settingsEdit.showMessageTimestamp}
          onChange={(_, checked) => setSettingsEdit({ ...settingsEdit, showMessageTimestamp: checked })}
        />
      </FormGroup>
    </div>
  )
}
